html,
body,
.digital-visualization-screen {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
  overflow: hidden;
  font-family: PingFangSC-Regular, PingFang SC, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei;
}

body {
  background-color: #060c2a;
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-bac.jpg);
  background-position: center;
  background-size: cover;
}

.digital-visualization-screen {
  display: flex;
  flex-direction: column;

  padding: 1rem;
  box-sizing: border-box;
  font-size: 1rem;
}



.header {
  flex: 0 0 calc(4rem - 1px);

  display: flex;
  justify-content: space-between;

  border-bottom: 1px solid #112e82;
  margin: 0 0.5rem 1rem;
  font-size: 1.5rem;
}

.header>.logo,
.header>.exit {
  flex: 0 0 10rem;
}

.header>.logo img {
  width: auto;
  height: 3rem;
}

.header>.logo {}

.header>.title {
  flex: 1 1 auto;

  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.5rem;
}

.header>.exit {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  color: #0a5ceb;
  font-size: 1rem;
  cursor: pointer;
}

.header>.exit img {
  width: 1rem;
  height: auto;
  margin-right: 0.5rem;
}



.body {
  flex: 1 1 calc(100% - (4rem - 1px));

  display: flex;
  flex-flow: column wrap;

  overflow: hidden;
  height: calc(100% - (4rem - 1px));
}

.body>.flex0,
.body>.flex1,
.body>.flex2,
.body>.flex3,
.body>.flex4,
.body>.flex5,
.body>.flex6,
.body>.flex7,
.body>.flex8 {
  flex: 0 1 calc(100% / 4 - 1rem);
  width: calc(100% / 4 - 1rem);
  height: calc(100% / 4 - 1rem);

  margin: 0.5rem;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.body>.flex0,
.body>.flex3,
.body>.flex4 {
  padding: 0;
}

.body>.flex0 {
  flex: 0 1 calc(50% - 1rem);
  height: calc(50% - 1rem);
  display: flex;

  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
}

.body>.flex0>div {
  flex: 0 1 calc(100% / 2 - 0.5rem);

  display: flex;
  flex-flow: column wrap;

  width: calc(50% - 0.5rem);
  height: calc(100% / 3 - 0.5rem);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.body>.flex0>div .stripe {
  position: absolute;
  width: 200%;
  left: -77%;
  height: 80%;
  transform-origin: 50% 50%;
  transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);
  pointer-events: none;
}

.body>.flex0>div .name {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.body>.flex0>div .name>span.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.7rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.body>.flex0>div .name>span.icon0 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon0.png);
}

.body>.flex0>div .name>span.icon1 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon1.png);
}

.body>.flex0>div .name>span.icon2 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon2.png);
}

.body>.flex0>div .name>span.icon3 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon3.png);
}

.body>.flex0>div .name>span.icon4 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon4.png);
}

.body>.flex0>div .name>span.icon5 {
  background-image: url(../../assets/img/digitalVisualizationScreen/visual-icon5.png);
}

.body>.flex0>div .value {
  flex: 1 1 auto;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
}

.body>.flex0>div .stripe>div {
  height: 50%;
}

.body>.flex0>div .stripe>div:nth-child(1) {
  background-color: rgba(255, 255, 255, 0.08);
}

.body>.flex0>div .stripe>div:nth-child(2) {
  background-color: rgba(255, 255, 255, 0.05);
}

.body>.flex1,
.body>.flex2 {
  flex: 0 1 calc(25% - 1rem);
  height: calc(25% - 1rem);

  display: flex;
  flex-direction: column;
}

.body>.flex1>.top,
.body>.flex2>.top {
  flex: 0 0 auto;
}

.body>.flex1>.bottom,
.body>.flex2>.bottom {
  flex: 1 1 auto;

  display: flex;
  overflow: hidden;
}

.body>.flex1>.bottom>.left,
.body>.flex2>.bottom>.left,
.body>.flex1>.bottom>.right,
.body>.flex2>.bottom>.right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.body>.flex1>.bottom>.left,
.body>.flex2>.bottom>.left {
  flex: 0 1 auto;
}

.body>.flex1>.bottom>.right,
.body>.flex2>.bottom>.right {
  flex: 1 0 auto;
  flex-flow: column nowrap;
}

.body>.flex1>.bottom>.right>span,
.body>.flex2>.bottom>.right>span {
  flex: 0 0 auto;

  width: 90%;
  height: auto;
  margin: 0.5rem 0;
}

.body>.flex1>.bottom>.right>span:nth-child(2n+1),
.body>.flex2>.bottom>.right>span:nth-child(2n+1) {
  display: flex;
  justify-content: space-between;
}

.body>.flex1>.bottom>.right>span:nth-child(2),
.body>.flex2>.bottom>.right>span:nth-child(2) {
  margin-bottom: 1rem;
}

.body>.flex1>.bottom>.right>span.percent-bar,
.body>.flex2>.bottom>.right>span.percent-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.body>.flex1>.bottom>.right>span.percent-bar>.out,
.body>.flex2>.bottom>.right>span.percent-bar>.out {
  width: 100%;
  height: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #192357;
}

.body>.flex1>.bottom>.right>span.percent-bar>.out>.in,
.body>.flex2>.bottom>.right>span.percent-bar>.out>.in {
  width: 10%;
  height: 100%;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: #50d494
}

.body>.flex1>.bottom>.right>span.percent-bar>.out>.in.full,
.body>.flex2>.bottom>.right>span.percent-bar>.out>.in.full {
  background-color: #0a5ceb
}

.body>.flex2>.bottom>.right .value span {
  font-size: 1rem;
}

.body>.flex3 {
  flex: 0 1 calc(100% / 4 * 3 - 1rem);
  width: calc(100% / 2 - 1rem);
  height: calc(100% / 4 * 3 - 1rem);

  display: flex;
  flex-direction: column;
}

.body>.flex3 .time {
  flex: 0 0 auto;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  font-size: 1rem;
  text-align: center;
}

.body>.flex3 .time span {
  display: inline-block;
  background-color: #0a5ceb;
  background-image: url(../../assets/img/digitalVisualizationScreen/time-background.jpg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 0.5rem;
  margin: 0 0.2rem;
  min-width: 2rem;
}

.body>.flex3 .animation {
  display: flex;
  justify-content: center;

  flex: 1 1 auto;
  background-image: url(../../assets/img/login/wangge.png);
  background-size: cover;
  background-origin: border-box;
  background-repeat: no-repeat;
  position: relative;
}

.body>.flex3 .animation .ball0,
.body>.flex3 .animation .ball1,
.body>.flex3 .animation .ball2,
.body>.flex3 .animation .ball3,
.body>.flex3 .animation img.ring,
.body>.flex3 .animation img.core,
.body>.flex3 .animation img.cloud {
  position: absolute;
  height: auto;
}

.body>.flex3 .animation .ball0,
.body>.flex3 .animation .ball1,
.body>.flex3 .animation .ball2,
.body>.flex3 .animation .ball3 {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: #0a5ceb;
  filter: blur(1px);
}

.body>.flex3 .animation img.ring {}

.body>.flex3 .animation img.ring,
.body>.flex3 .animation img.core {
  width: 70%;
  bottom: 2.5rem;
}

.body>.flex3 .animation img.core {}



.body>.flex4 {
  width: calc(100% / 2 - 1rem);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  position: relative;
}

.body>.flex4>.left,
.body>.flex4>.middle,
.body>.flex4>.right {
  flex: 1 1 auto;

  display: flex;
  flex-flow: column nowrap;
  position: relative;
  padding: 1rem;
}

.body>.flex4>.middle {
  margin: 0 1rem;
}

.body>.flex4>.right {
  min-width: calc(100% / 2);
}

.body>.flex4>.left>.top,
.body>.flex4>.middle>.top,
.body>.flex4>.right>.top {
  flex: 0 0 auto;
}

.body>.flex4>.left>.bottom,
.body>.flex4>.middle>.bottom,
.body>.flex4>.right>.bottom {
  flex: 1 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.body>.flex1>.bottom>.left>.dashboard,
.body>.flex2>.bottom>.left>.dashboard,
.body>.flex4>.left>.bottom .dashboard,
.body>.flex4>.middle>.bottom .dashboard,
.body>.flex4>.right>.bottom .dashboard {
  width: 11rem;
  height: 11rem;
}

.body>.flex4>.right>.bottom>.left,
.body>.flex4>.right>.bottom>.right {
  flex: 0 0 50%;
}

.body>.flex4>.right>.bottom>.right {
  flex: 0 0 auto;
}

.body>.flex4>.right>.bottom>.right>div:nth-of-type(2) {
  margin-bottom: 0.777rem;
}

.background-color {
  background-color: rgba(14, 19, 219, 0.15);
}

.value {
  font-size: 1.8rem;
  font-family: 'Impact', 'Impact-ttf';
}

.value2 {
  font-weight: 600;
}

.name {
  color: rgba(255, 255, 255, 0.8);
}

.title {
  font-weight: 500;
}

@font-face {
  font-family: 'Impact-ttf';
  src: url(../../assets/img/digitalVisualizationScreen/Impact.eot?#iefix&v=1.0.0) format('embedded-opentype'), url(../../assets/img/digitalVisualizationScreen/Impact.woff2?v=1.0.0) format('woff2'), url(../../assets/img/digitalVisualizationScreen/Impact.woff?v=1.0.0) format('woff'), url(../../assets/img/digitalVisualizationScreen/Impact.ttf?v=1.0.0) format('truetype'), url(../../assets/img/digitalVisualizationScreen/Impact.svg?v=1.0.0#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}




@media all and (max-width:2560px) {
  html {
    font-size: 17px;
  }
}

@media all and (max-width:1920px) {
  html {
    font-size: 16px;
  }
}

@media all and (max-width:1680px) {
  html {
    font-size: 15px;
  }
}

@media all and (max-width:1440px) {
  html {
    font-size: 14px;
  }
}

@media all and (max-width:1280px) {
  html {
    font-size: 13px;
  }
}

@media all and (max-width:1024px) {
  html {
    font-size: 12px;
  }
}


.flex-row-wrap {
  display: flex;
  flex-flow: row wrap;
}

.flex-column-wrap {
  display: flex;
  flex-flow: column wrap;
}

.flex-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

.flex-column-nowrap {
  display: flex;
  flex-flow: column nowrap;
}


.prohibit {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7777777rem;
  height: 100%;
}
